<template>
    <div class="home" @click="changeStatus">
      <header-tab ref="header1"/>
      <div class='wrap' id='wrap-m'>
        <div class='indexscreen'>
          <div class='banner j-banner swiper-container'>
            <div class='swiper-wrapper'>
              <div class='swiper-slide' v-for="(item,index) in banners" :key="index">
                <div class='banner-txt'>
                  <h1>{{item.title}}</h1>
                  <p>{{item.text}}</p>
                </div>
                <div class='item'>
                  <img :src="url + item.image" v-if="item.image">
                </div>
              </div>
            </div>
            <div class='swiper-pagination'></div>
            <div class='arrow-tip' id='go-product'>
              <div class='arrow'></div>
              <div class='circle'></div>
            </div>
          </div>

          <div class='scheme'>
            <div class='demand-formwork j-demandpub' :class="{show:textareaShow}"  id='demandForm'>
              <div class='demand-formwork-left'>
                <dl class='bg-none'>
                  <dt>说说您的具体需求</dt>
                  <dd><textarea placeholder='说说您的具体要求 ......' class='input-demand j-demandDesc' v-model="form.content"
                                id='demandDescription' @focus="textareaShow = true" @blur="textareaShow = false"></textarea></dd>
                </dl>
              </div>
              <div class='demand-formwork-right distinction'>
                <dl>
                  <dt>项目预算</dt>
                  <dd>
                    <div class='item-main'>
                      <div class='ui-select clearfix j-select j-budgetRangeSelect'>
                        <div class='ui-select-view' @click.stop="changeBudget(-1)">
                          <input type='hidden' class='ui-select-value' id='budgetRange' value=''/>
                          <span class='ui-select-text' v-if="form.yusuan_id">{{budgetText}}</span>
                          <span class='ui-select-text' v-else><em class='ui-select-placeholder'>项目预算</em></span>
                          <div class='ui-select-icon'><i class='ui-select-icon-arrow'></i></div>
                        </div>
                        <ul class='ui-select-options' v-show="budgetShow" style="display: none;">
                          <li data-value='1' v-for="(item,index) in budget" :key="index" @click="changeBudget(index)">{{item.name}}</li>
                        </ul>
                      </div>
                    </div>
                  </dd>
                </dl>
                <dl class='service-type'>
                  <dt>服务类型</dt>
                  <dd>
                    <div class='item-main'>
                      <div class='ui-select clearfix j-select j-serviceSelect'>
                        <div class='ui-select-view' @click.stop="changeService(-1)">
                          <span class='ui-select-text' title='' v-if="form.type_id">{{serviceText}}</span>
                          <span class='ui-select-text' title='' v-else><em class='ui-select-placeholder'>服务类型</em></span>
                          <div class='ui-select-icon'><i class='ui-select-icon-arrow'></i></div>
                        </div>
                        <ul class='ui-select-options' v-show="serviceShow" style="display: none">
                          <li @click="changeService(index)" v-for="(item,index) in service" :key="index">{{item.name}}</li>
                        </ul>
                      </div>
                    </div>
                  </dd>
                </dl>
                <div class='user-zbj'>
                  <dl>
                    <dt>手机号</dt>
                    <dd><input name='modifyphone' type='text' placeholder='请输入您的手机号'
                               class='input-tel j-userphone' id='contactTel' v-model="form.phone"/></dd>
                  </dl>
                  <dl class='bg-none j-userverify' style='margin-left: -10px;'>
                    <dt>验证码</dt>
                    <dd>
                      <input name='modifyphone-yzm' type='text' placeholder='请输入验证码'
                             class='input-verificationCode' id='code' v-model="form.yzm"/>
                      <a href='javascript:;' class='btn-verificationCode employ-dialog-modifyphone-verify'
                         :class="[telError ? 'disabled' : '']" @click="sendCode">{{codeText}}</a>
                    </dd>
                  </dl>
                </div>
                <dl style='margin-left: 18px; padding: 0 0 0 20px;'>
                  <dd><a href='javascript:;' class='btn-scheme j-submitForm' @click="submitForm(1)">我要定制需求</a></dd>
                </dl>
                <div class='demand-formwork-txt j-demandDescTxt'>
                  <h5>自己描述需求，建议您参考以下模板.<a href='javascript:;' class='j-useFormwork'>使用模板</a></h5>
                  <h6>好的需求描述，让人更容易理解，更好的为您进行服务。</h6>
                  <h4>模版参考：</h4>
                  <div class='formwork-content'>
                    <p>1.公司或需求名称（开发/设计对象）</p>
                    <p>例：重庆大鹏科技有限公司，设计及开发一套H5活动页</p><br/>
                    <p>2.设计对象简介（网址、文字介绍等）</p>
                    <p>例：大鹏公司做线上化妆品售卖，针对18~35年轻女性，成立1年左右</p><br/>
                    <p>3.明确具体的要求：</p>
                    <p>例：自适应网站，活动报名表单收集、开发时间要求，预算范围等</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class='mod-demandform j-demandpub'>
            <div class='position' id='demandForm-M'></div>
            <ul>
              <li><textarea type='text' class='textarea-text'  v-model="form.content"  placeholder='说说您的具体要求 ... ...'></textarea></li>
              <li>
                <div class='budget'>
                  <div class='ui-select clearfix j-select j-budgetRangeSelect-m'>
                    <div class='ui-select-view' @click.stop="changeBudget(-1)">
                      <span class='ui-select-text' v-if="form.yusuan_id">{{budgetText}}</span>
                      <span class='ui-select-text' v-else><em class='ui-select-placeholder'>项目预算</em></span>
                      <div class='ui-select-icon'><i class='ui-select-icon-arrow'></i></div>
                    </div>
                    <ul class='ui-select-options' v-show="budgetShow">
                      <li  v-for="(item,index) in budget" :key="index" @click="changeBudget(index)">{{item.name}}</li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class='j-pubService hide'>
                <div class='budget'>
                  <div class='ui-select clearfix j-select j-serviceSelect'>
                    <div class='ui-select-view' @click.stop="changeService(-1)">
                      <span class='ui-select-text' v-if="form.type_id">{{serviceText}}</span>
                      <span class='ui-select-text' v-else><em class='ui-select-placeholder'>服务类型</em></span>
                      <div class='ui-select-icon'><i class='ui-select-icon-arrow'></i></div>
                    </div>
                    <ul class='ui-select-options' v-show="serviceShow" style="display: none">
                      <li v-for="(item,index) in service" :key="index" @click="changeService(index)">{{item.name}}</li>

                    </ul>
                  </div>
                </div>
              </li>
              <div class='user-zbj-m'>
                <li><input type='text' name='modifyphone' class='input-text j-userphone' v-model="form.phone"
                           placeholder='手机号码' id='contactTel-m'/></li>
                <div class='j-userverify'>
                  <li><input type='text' name='modifyphone-yzm' class='input-text especial' v-model="form.yzm"
                             placeholder='验证码' id='code-m'/>
                    <a href='javascript:void(0);' class='code-btn  employ-dialog-modifyphone-verify'
                       :class="[telError ? 'disabled' : '']" @click="sendCode">{{codeText}}</a></li>

                </div>
              </div>
            </ul>
            <div class='ui-box'>
              <a href='javascript:void(0);' @click="submitForm(1)" class='ui-box-btn j-submitForm'>立即获取方案</a>
            </div>
          </div>
        </div>

        <div class='product'>
          <div class='product-type' id='productType'>
            <div class='mode-pc'>
              <div class='type-wrap'>
                <ul class='type clearfix'>

                  <li v-for="(item,index) in tabs" :key="item.id">
                    <div class='par-type j-product-type' :class="[tabIndex == index ? 'active' : '']" @click="changeTab(index)">{{item.name}}</div>
                    <div class='sub-type'>
                      <div class='arrow-up'>
                        <div class='arrow-up-block'></div>
                      </div>

                      <a href="javascript:void(0)" class='j-product-type ' v-for="(v,k) in item.list" :key="v.id" @click="changeTab(index,k,v.id)">{{v.name}}</a>

                    </div>
                  </li>

                </ul>
              </div>
              <div class='product-type-space'></div>
            </div>
            <div class='mode-me'>
              <div class='type-wrap'>
                <div class='type-head'>
                  <div class='title'><i></i>产品列表</div>
                  <div class='select' id='j-m-typeChoice' @click="showKinds = !showKinds"><span>{{selectedTab.name}}</span><i></i></div>
                </div>
              </div>
              <div class='product-type-space'></div>
            </div>
          </div>
          <div class='yx-product'>
            <ul class='list clearfix' id='YxproductList'></ul>
          </div>

          <kinds-list :showKinds="showKinds" :tabs="tabs" @hideKinds="hideKinds"></kinds-list>

          <div class='product-list'>
            <ul class='list clearfix' id='productList'>

              <li v-for="(item,index) in dataList" :key="index">
                <router-link :to="'/productDetail?id='+item.id" >
                  <span class='icon_optimal'></span>

                  <div class='pic'><img :src='item.image | imgValitate(url) '/></div>
                  <h3 class='tit'>{{item.title}}</h3>
                  <p class='desc'>{{item.introduce}}</p>
                  <div class='price'>¥{{item.price}}</div>
                </router-link>
              </li>

            </ul>
            <div class='loadmore' id='loadProductList'>
              <div class='loading'></div>
            </div>
          </div>
        </div>
      </div>
      <bottom-form title="免费提交需求" v-if="isShowForm" @hideForm="isShowForm = false"/>
      <div class='help-employer' id='utopia_widget_4'>
        <div class='container'>
          <div class='employerbox'>
            <div class='employerbox-txt'>
              <h4>老衲软件已帮助<span id='employerNumber'></span>位雇主解决开发难题</h4>
              <p>在线提交您的需求，我们将为您提供专业免费的咨询服务</p>
              <h6><a href='javascript:;' class='j-tomakedemand' @click="isShowForm = true">提交需求</a></h6>
              <h5>稍后交易顾问将尽快与您联系</h5>
              <h3>在线提交您的需求，我们将为您提供专业免费的咨询服务，稍后交易顾问将尽快与您联系</h3>
            </div>
          </div>
        </div>
      </div>
      <footer-tab />
    </div>
</template>

<script>
  import HeaderTab from '@/components/headerTab'
  import FooterTab from '@/components/FooterTab'
  import BottomForm from '@/components/bottomForm'
  import KindsList from '@/components/KindsList'
  import mixin from '@/api/mixins.js'
    export default {
        mixins:[mixin],
        components:{
          HeaderTab,FooterTab,BottomForm,KindsList
        },
        
        data(){
          return{
            tabIndex:0,
            tabs:[{id:0,name:'全部'}],
            selectedTab:{id:1,name:'全部'},
            textareaShow:false,//
            
            showKinds:false,//是否显示全部分类
            isShowForm:false,//点击底部按钮，是否显示表单
            banners:[],
            url:this.$url,
            dataList:[]
          }
        },
        mounted(){
          this.getBanners();
          this.getYuSuan();
          this.getTabs();
          this.getDataList();
          this.getService()
        },
        methods:{
          // 轮播图
          getBanners(){
            this.$http.post('index/getlunbo').then(res=>{
              this.banners = res;

            setTimeout(()=>{
                new Swiper('.swiper-container', {
                  autoplay: true,//可选选项，自动滑动
                  loop:true
                })
              })
            },1000)
             
          },
          
          // 获取服务分类
          getTabs(){
            this.$http.post('index/getfuwufenlei').then(res=>{
                this.tabs = this.tabs.concat(res);
            })
          },
          
          getDataList(id){
            let url = id ? '/index/getcategoryfuwu' : 'index/getquanbufuwu';
            let param = id? {id:id} : {};
            this.$http.post(url,param).then(res=>{
                console.log(res);
                this.dataList = res
            })
          },
          hideKinds(obj){
            console.log(obj)
            this.showKinds = false;
            if(obj){
              if(obj.index == 0){
                this.selectedTab = this.tabs[0];
                this.getDataList()
              }else{
                this.selectedTab = this.tabs[obj.index].list[obj.k];
                this.getDataList(this.selectedTab.id)
              }
            }
          },
          changeTab(index,k,id){
            this.tabIndex = index;
            if(index>0){
              console.log(typeof k )
              if(typeof k == 'number'){
                this.getDataList(id)
              }
            }else{
              this.getDataList()
            }
          },
          
          //状态改变
          changeStatus(){
            this.budgetShow = false;
            this.serviceShow = false;
            this.$refs.header1.tabShow = false
          },

        },
        filters: {
          imgValitate: function (value,url) {
            let imgurl = value;
            if(!imgurl.includes('http')){
              imgurl = url + imgurl;
            }
            return imgurl
          }
        },
      watch:{
          'form.tel':{
            handler(newVal){
              if(/^1[3456789]\d{9}$/.test(newVal)){
                this.telError = false
              } else{
                this.telError = true
              }
            }
          }
      },
      beforeDestroy() {
          this.isShowForm = false
      }
    }
</script>

<style scoped>
  #demandForm dt{
    display: none;
  }
</style>
